<%
# Copyright (C) 2011 - present Instructure, Inc.
#
# This file is part of Canvas.
#
# Canvas is free software: you can redistribute it and/or modify it under
# the terms of the GNU Affero General Public License as published by the Free
# Software Foundation, version 3 of the License.
#
# Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
# A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
# details.
#
# You should have received a copy of the GNU Affero General Public License along
# with this program. If not, see <http://www.gnu.org/licenses/>.
%>

<% js_bundle 'legacy/eportfolios_wizard_box' %>

<% content_for :wizard_box do %>
  <div class="wizard_options" >
    <% if @owner_view %>
      <h3>{{#t}}Getting Started{{/t}}</h3>
    <% else %>
      <h3>{{#t}}Using an ePortfolio{{/t}}</h3>
    <% end %>
    <ul class="wizard_options_list">
      <li class="option information_step">
        <a href="#" class="header icon-info">{{#t}}Introduction{{/t}}</a>
        <div class="details" style="display: none;">
          <%= t('introduction.body', <<-DETAILS,
            ePortfolios are a place to demonstrate your work. They are made of
            sections and pages. The list of sections are along the left side of
            the window (%{showme1}). Each section can have multiple pages,
            shown on the right side of the window (%{showme2}).
            DETAILS
            :showme1 => show_me('sections_list_hover'),
            :showme2 => show_me('pages_list_hover')) %>
        </div>
      </li>
      <li class="option content_step portfolio_step">
        <a href="#" class="header icon-document">{{#t}}Portfolio Sections{{/t}}</a>
        <div class="details" style="display: none;">
          <div style="font-size: 0.8em;">
            <p><%= t('sections.body1', <<-DETAILS,
              Sections are listed along the left side of the window
              (%{showme1}). Each section can have multiple pages inside of it.
              To organize or add sections, click the "%{manage_sections}" link
              (%{showme2}).
              DETAILS
              :showme1 => show_me('sections_list_hover'),
              :manage_sections => manage_sections_link_text,
              :showme2 => show_me('organize_sections_hover')) %></p>

            <p><%= t('sections.body2', <<-DETAILS,
              You can rename any section by clicking on the %{edit_icon} icon
              that appears, rearrange sections by clicking and dragging them,
              or delete sections by clicking the %{delete_icon} icon.
              DETAILS
              :edit_icon => '{{> icons/edit}}'.html_safe,
              :delete_icon => '{{> icons/end}}'.html_safe) %></p>
          </div>
        </div>
      </li>
      <li class="option content_step section_step">
        <a href="#" class="header icon-document">{{#t}}Section Pages{{/t}}</a>
        <div class="details" style="display: none;">
          <div style="font-size: 0.8em;">
            <p><%= t('pages.body1', <<-DETAILS,
              Sections have multiple pages. You can see the list of pages for
              the current section on the right side of the window (%{showme1}).
              To organize or add pages, click the "%{manage_pages}" link
              (%{showme2}).
              DETAILS
              :showme1 => show_me('pages_list_hover'),
              :manage_pages => manage_pages_link_text,
              :showme2 => show_me('organize_pages_hover')) %></p>

            <p><%= t('pages.body2', <<-DETAILS,
              You can rename any page by click on the %{edit_icon} icon that
              appears, delete a page by clicking the %{delete_icon} icon, or
              rearrange the order of pages by click and dragging them.
              DETAILS
              :edit_icon => edit_icon,
              :delete_icon => delete_icon) %></p>
          </div>
        </div>
      </li>
      <% if !@owner_view %>
        <li class="option edit_step">
          <a href="#" class="header">{{#t}}Page Content{{/t}}</a>
          <div class="details" style="display: none;">
            <%= t('page_content.body1', <<-DETAILS,
              The content you see on a page is the same content any visitors
              will see. To edit this content, click the "%{edit_link_text}"
              link (%{showme}) and the page will change to editing mode.
              DETAILS
              :edit_link_text => edit_link_text,
              :showme => show_me('edit_content_hover')) %>
          </div>
        </li>
        <li class="option editing_mode" style="display: none;">
          <a href="#" class="header">{{#t}}Page Content{{/t}}</a>
          <div class="details" style="display: none;">
            <div style="font-size: 0.8em;">
              <p><%= t('page_content.body2', <<-DETAILS,
                Now you're editing! Rename the page or change commenting
                options (%{showme1}) if you like. You can save, preview or
                cancel your changes at any time by clicking the button on the
                right side (%{showme2}).
                DETAILS
                :showme1 => show_me('page_settings_hover'),
                :showme2 => show_me('page_buttons_hover')) %></p>

              <p><%= t('page_content.body3', <<-DETAILS,
                Content is divided into subsections, which each have a dotted
                border. You can delete or edit the contents of a subsection by
                clicking the %{edit_icon} or %{delete_icon} icons at the top
                right corner of the subsection.
                DETAILS
                :edit_icon => edit_icon,
                :delete_icon => delete_icon(true)) %></p>

              <p><%= t('page_content.body4', <<-DETAILS,
                To add new subsections, find and click the type of content you
                want to add in the options list on the right side of the page
                (%{showme}).
                DETAILS
                :showme => show_me('page_add_subsection_hover')) %></p>
            </div>
          </div>
        </li>
      <% end %>
      <% if @owner_view %>
        <li class="option add_step adding_submissions">
          <a href="#" class="header icon-add">{{#t}}Adding Submissions{{/t}}</a>
          <div class="details" style="display: none;">
            <%= t('submissions.body1', <<-DETAILS,
              You may have noticed at the bottom of this page is a list of
              recent submissions from your classes (%{showme}). You can quickly
              add submissions to new pages in your portfolio from this page.
              Just click the submission you want to add and a simple dialog
              will pop up.
              DETAILS
              :showme => show_me('recent_submissions_hover')) %>
          </div>
        </li>
        <li class="option adding_submissions_dialog" style="display: none;">
          <a href="#" class="header icon-add">{{#t}}Adding Submissions{{/t}}</a>
          <div class="details" style="display: none;">
            <%= t('submissions.body2', <<-DETAILS)
              Great! Now to finish adding the submission, you need to choose
              which section you'd like to add it to and give the page a name.
              After you click "Add Page" you'll be taken to the new page so you
              can edit it in more detail if you like.
              DETAILS
            %>
          </div>
        </li>
      <% end %>
      <li class="option edit_step">
        <a href="#" class="header icon-settings">{{#t}}ePortfolio Settings{{/t}}</a>
        <div class="details" style="display: none;">
          <%= t('settings.body', <<-DETAILS,
            To change the settings for your ePortfolio, click the "ePortfolio
            Settings" link (%{showme}). You can rename the portfolio and also
            change whether it is public or private. Private portfolios are only
            visible to those to whom you grant access.
            DETAILS
            :showme => show_me('eportfolio_settings_hover')) %>
        </div>
      </li>
      <% if @owner_view %>
        <li class="option publish_step">
          <a href="#" class="header icon-arrow-right">{{#t}}Let's Do It{{/t}}</a>
          <div class="details" style="display: none;">
            <%= t('finish.body', <<-DETAILS,
              Ready to get started? You can always get back to this wizard from
              any page by clicking the "%{help_link_text}" link you'll
              see there.
              DETAILS
              :help_link_text => help_link_text) %>
            <div style="text-align: center; font-size: 1.2em;">
              <b><a href="<%= eportfolio_path(@portfolio.id, :view => :preview) %>">
                {{#t}}View the Portfolio{{/t}}
              </a></b>
            </div>
          </div>
        </li>
      <% end %>
    </ul>
  </div>
  <div class="wizard_details">
    <div>
      <h3 class="header" style="display: none;">{{#t}}Step{{/t}}</h3>
      <div style="text-align: center; font-size: 1.5em; margin-top: 5px;">
        <a class="link">&nbsp;</a>
      </div>
    </div>
  </div>
  <div class="clear"></div>
<% end %>
